<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    #list,
    .content {
        background-color: rgb(110, 109, 109);
        width: 550px;
        height: 35px;
        margin: auto;
        display: flex;
        justify-content: space-around;
    }

    #list li,
    .content li {
        float: left;
        line-height: 35px;

    }


    #header {
        height: 50px;
        background-color: rgb(122, 119, 119);
        padding: 0 20px;
    }

    .header-right {
        float: right;
        line-height: 50px;
        display: none;
    }

    #data span {
        display: none;
    }
</style>

<body>
    <div id="header">

        <div class="header-right bb">
            <a href="register.html">注册</a>|
            <a href="denglu.html">登录</a>
        </div>
        <div class="header-right aba">
            <span class="user"></span>|
            <span class="btn">退出</span>
        </div>
    </div>

    <ul id='list'>
        <li id='data'>
            用户名
            <span class='up'>↑</span>
            <span class='down'>↓</span>
        </li>
        <li>密码</li>
        <li>电话</li>
        <li>ID</li>
        <li>操作</li>
    </ul>

    <div id="box">
        <!-- <ul class='content'>
        <li>用户名</li>
        <li>密码</li>
        <li>电话</li>
        <li>ID</li>
        <li>删除</li>
    </ul> -->
    </div>
</body>
<script src="jquery-1.11.3.js"></script>
<script src="cookie.js"></script>
<script src="ajax.js"></script>
<script>
    if (getCookie('user')) {
        $('.aba').show()
        $('.user').html(getCookie('user'))
        $('.btn').click(function () {
            $('.bb').show()
            $('.aba').hide()
        })
        $.ajax({
            type: 'get',
            url: "http://localhost/1907/list.php",
            dataType: 'json',
            success: function (data) {

                var html = ''
                data.forEach(function (item) {
                    var {
                        id,
                        password,
                        telephone,
                        username
                    } = item
                    html += `<ul class='content'>
                        <li>${username}</li>
                        <li>${password}</li>
                        <li>${telephone}</li>
                        <li>${id}</li>
                        <li><span class='delect' data-id='${id}' data-user='${username}'>删除</span>|
                        <span class='updata' data-id='${id}'>修改</span></li>
                        </ul>`
                })

                box.innerHTML = html

            }
        })
    } else {
        $('.bb').show()

        // location.href = 'denglu.html'

    }

    $(document).on('click', ".updata", function () {

        // console.log(111)
        location.href = `xiugai.html?id=${$(this).attr('data-id')}`

    })


    $(document).on('click', ".delect", function (event) {

        $target = $(event.target)

        var id = $target.attr('data-id')

        if ($target.attr('data-user') == getCookie('user')) {
            alert('无法操作')
        } else {
            $.ajax({
                type: "get",
                url: `http://localhost/1907/delect.php?id=${id}`,
                dataType: "json",

                success: function (data) {

                    console.log(data)

                    if (data['code'] == 1) {
                        alert(data['msg'])
                        $target.parent().parent().remove()
                    }

                }

            })

        }
    })


    var num = 0
    $(document).on('click', "#data", function () {
        console.log(111)
        num++;
        if (num % 3 == 1) {//升序

            $('.up').show()
            renderList('asc')

        } else if (num % 3 == 2) {//降序

            $('.up').hide()
            $('.down').show()
            renderList('desc');
        } else {
            $('.up').hide()
            $('.down').hide()
            renderList();
        }

    })


    renderList();

function renderList(order = 'normal') {
  ajax({
    path: 'http://localhost/1907/21mysql_connect.php',
    data: {
      order
    },
    successCB: data => {
      // console.log(data);
      var html = '';
      data.forEach(({ id, username, password, telephone }) => {
        html += `
      <li>
        <div>${id}</div>
        <div>${username}</div>
        <div>${password}</div>
        <div>${telephone}</div>
        <div><span class="del" data-id="${id}">删除</span>|<span class="update" data-id="${id}">更新</span></div>
      </li>
      `
      })

      box.innerHTML = html;

    }
  })
}









</script>

</html>